<template>
    <div class="top">
        <div class="last">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                <el-form-item label="用户名" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" type="password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name: 'login',
    data() {
      return {
        ruleForm: {
          name: '',
          password: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          password: [
              { required: true, message: '请输入密码', trigger: 'blur'},
              { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post("/api/login",this.$querystring.stringify({
            username:this.ruleForm.name,
            password:this.ruleForm.password
            })).then(reponse=>{
            console.log(reponse);
            if(reponse.data == true){
                /*
                成功跳转
                */
               this.$cookies.set("username",this.ruleForm.name,"2H")
               this.$router.push("/")
            }else{
                alert("用户名/密码错误")
            }
            })
            .catch(error=>{
            console.log(error);
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>

<style scoped>
    .top{
        background-image: url("../assets/r.jpg");
        width: 100%;
        height: 721px;
    }
    .last{
        width: 300px;
        height: 350px;
        padding-top: 200px;
        margin-left: 600px;
    }
    .demo-ruleForm{
        /*padding-top: 200px;
        padding-left: 600px;
        padding-right: 600px;*/
        width: 300px;

    }
</style>
